/**
 * @description  : 部门选择
 * @descriptionDetail : 部门选择
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:23:03
 */
<template>
  <view class="page">
    <theme-navbar
      :is-white="false"
      :isBack="false"
      backColor="#2b85e4"
      :title=" title ? title : limitNodeType == '07' ? '选择片区':'选择部门'"
    >
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <u-tabs :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="orgListContainer">
        <u-loading style="margin-left: 40%;" :show="loading" size="100" mode="flower"></u-loading>
        <u-cell-group>
          <view v-for="(item, idx) in orgItems" :key="idx">
            <u-cell-item
              :title="item.name"
              v-if="item.nodeType != limitNodeType"
			  :arrow="hasChild(item)"
              @tap="handlerItem(item)"
            >
              <view style="margin-right: 5px;margin-top:3px;" v-if="isHybrid" slot="icon" @tap.prevent.stop>
                <u-icon custom-prefix="csbi-icon" size="45" name="radio" color="#2979ff" v-if="selectIds.includes(item.id)" @click="handlerSelect(item)"></u-icon>
                <u-icon custom-prefix="csbi-icon" size="45" name="kongradio" color="#b5b5b5" v-else @click="handlerSelect(item)"></u-icon>
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false" :title="item.name" v-else @tap="handlerSelect(item)">
              <template #right-icon>
                <u-icon
                  name="checkbox-mark"
                  color="#2979ff"
                  size="38"
                  v-if="selectIds.includes(item.id)"
                ></u-icon>
              </template>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
import commonApi from "@/service/common/common.service";
/**
 * 部门选择
 * 可以限制单选、多选，可选的层级
 */
export default {
  name: "OrgSelect",
  props: {
    // 单选或多选, 默认单选
    isSingle: {
      type: Boolean,
      default: true,
    },
    // 限制可选的节点类型：03专卖局、06管理所，07片区
    limitNodeType: {
      type: String,
      default: '07',
    },
    isHybrid: { // 是否混合选择，可选择任一层级，默认不开启
      type: Boolean,
      default: false,
    },
    treeType: {
      type: String,
      default:"zm-pq", // zm-case
    },
    cleanParentOrg:{
      type:Boolean,
      default: false,
    },
    tips: {
      type: String,
      default:"请选择单位！", // zm-case
    },
	title:{
      type: String,
      default:undefined, // zm-case
	},
	parentUuid:{
	  type: String,
	  default:undefined,
	},
	hasVirtual:{ // 有虚拟跟
	  type: Boolean,
	  default: false,
	}
  },
  data() {
    return {
      user: this.$store.state.userInfo,
      orgs: [],   // 所有部门数据
      tabList: [],  // 页头滚动内容
      current: 0,
      orgItems: [],  // 点击选中的下级部门
      selectItems: [],  // 选中的部门
      selectIds: [],    // 选中的id
      loading: true,
	  virtualTab:{
		name:'根节点',
		id:"",
		isVirtual:true,
	  },
    };
  },
  onLoad() {

  },
  created() {
    // 查询所在部门数据
    let org = this.user.user.org;
	let pOrgUuid  = "";
	if(this.parentUuid){
		pOrgUuid = this.parentUuid;
	}else{
		pOrgUuid = this.user.docOrgUuid || org.orgUuid;
	}
    commonApi.orgTree(this.cleanParentOrg ? '' : pOrgUuid, this.treeType).then(dr => {
      if (dr.success) {
        this.orgs = dr.data;
		if(!this.cleanParentOrg && !this.hasVirtual){
		  this.tabList = dr.data.filter(d => d.nodeType == org.orgRank);
		  this.orgItems = dr.data.filter(d => d.pId == this.tabList[0].id);
		}else{
		  this.tabList = [this.virtualTab];
		  this.getVirtualOrgItems();
		}
      }
      this.loading = false;
    });
  },
  methods: {
	getVirtualOrgItems(){
		let nodeTyps = ['00','01','02','03','04','05','06','07'];
		let tre = [];
		for (let i = 0; i <  nodeTyps.length; i++) {
			tre = this.orgs.filter(itm => {
				return itm.nodeType == nodeTyps[i];
			});
			if(tre.length > 0) break;
		}
		this.orgItems = tre;
	},
	hasChild(itm){
		return this.orgs.filter(d => d.pId == itm.id).length > 0;
	},
    // 切换选中项
    change(index) {
      this.current = index;
	  if(this.tabList[index].isVirtual){
		this.getVirtualOrgItems();
	  }else{
		this.orgItems = this.orgs.filter(d => d.pId == this.tabList[index].id);
	  }
      this.tabList = this.tabList.slice(0, index + 1);
    },
    // 点击选中项
    handlerItem(orgItem){
      this.tabList.push(orgItem);
      this.current = this.tabList.length - 1;
      this.orgItems = this.orgs.filter(d => d.pId == orgItem.id);
    },
    // 点击根节点
    handlerSelect(orgItem) {
      if (this.isSingle) {  // 单选
        this.selectItems = [];
        this.selectIds = [];
        this.selectItems.push(orgItem);
        this.selectIds.push(orgItem.id);
      } else {  // 多选
        let sItems = this.selectItems.filter(s => s.id == orgItem.id);
        if (sItems.length > 0) {
          this.selectItems = this.selectItems.filter(s => s.id != orgItem.id);
          this.selectIds = this.selectIds.filter(i => i != orgItem.id);
        } else {
          this.selectItems.push(orgItem);
          this.selectIds.push(orgItem.id);
        }
      }
    },
    // 点击确定
    onSure() {
		if(this.selectItems.length == 0){
		  this.$u.toast(this.tips);
		  return false;
		}
      this.$emit("choose", this.selectItems);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-list {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  z-index: 999;
}
#orgListContainer {
  margin-top: 75px;
}
.nav-right-icon {
  padding-right: 15px;
  color: #FFF;
}
/deep/ .u-tab-item {
  max-width: 160px;
}
</style>
